<template>
  <div class="licence" v-if="currentType !== 'ChangePassword' ? true: getConfig.flag">
    <div class="licenceTitle" v-if="currentType !== 'ChangePassword'">
      <span>{{$t('授权信息')}}</span>
    </div>
    <div class="licenceContainer">
      <div class="licenceContent" id="licence">
        <el-table :data="licenceList" border stripe class="licenceTableContent">
          <el-table-column prop="name" align='center' :label="$t('文件名')" min-width="150">
            <template slot-scope="scope">
              <tooltip :html="scope.row.name" :content="scope.row.name" class="wid190" :refName="scope.row.name">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="status" align='center' :label="$t('状态')" min-width="100"></el-table-column>
          <el-table-column prop="limit" align='center' :label="$t('过期时间')" min-width="125">
            <template slot-scope="scope">
              <tooltip :html="scope.row.limit" :content="scope.row.limit" class="wid190" :refName="scope.row.limit">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column align='center' :label="$t('操作')" min-width="90" v-if="currentType !== 'ChangePassword'">
            <template slot-scope="scope">
              <el-link type="success" :underline="false" @click="dialogVisible(scope.row)">{{$t('更新')}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="num" align='center' :label="$t('授权编号')" min-width="120">
            <template slot-scope="scope">
              <tooltip :html="scope.row.num" :content="scope.row.num" class="wid190" :refName="scope.row.num">
              </tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <upload-file ref="licenceDialogRef" v-if="licenceDialogVisible"></upload-file>
    </div>
  </div>
</template>

<script>
import { getLicence } from '@/api/home'
import UploadFile from './licence/uploadFile.vue'
import { Loading } from 'element-ui'
export default {
  components: { UploadFile },
  name: 'licence',
  props:{
    currentType:{
      type:String,
      default:'',
      required:false,
    },
    getConfig:{
      type:Object,
      default:()=>{},
      required:false,
    }
  },
  data () {
    return {
      licenceDialogVisible: false,
      loadingInstance: null,
      licenceList: []
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    init () {
      this.listData()
    },
    listData () {
      if (document.getElementById('licence')) {
        this.loadingInstance = Loading.service({
          target: '#licence',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      getLicence().then(res => {
        if (res.status === 0) {
          // 如果是系统管理员或者超级管理员首次登录，且未授权的时候，需要授权
          this.licenceList = this.currentType === 'ChangePassword' ? res.info.filter(item=>['基础功能','Basic functions'].includes(item.name)) : res.info;
          this.$emit('getLicenceLoad', this.licenceList)
          if (this.loadingInstance) {
            this.loadingInstance.close()
            this.loadingInstance = null
          }
        }
      }).catch(e => {
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
        }
      })
    },
    dialogVisible (row) {
      this.licenceDialogVisible = true
      this.$nextTick(() => {
        this.$refs.licenceDialogRef.init(row)
      })
    }
  }
}
</script>
<style lang="less">
.licenceTitle {
  border-bottom: 1px solid #dcdfe6;
  padding: 10px 20px;
  color: #303133;
}

.licenceTableContent {
  margin: 0px 20px 0px 0px;
}

.licenceContent {
  width: 100%;
  padding: 20px 10px 0px 10px;
}

.licenceContainer {
  height: 260px;
  overflow: auto;
  
}
</style>
